<template>
    <div class="carousel-item-container" @mousemove="changeImageMove">
        <Loading :imageUrl="imageUrl" v-if="!isLoading" />
        <div class="carousel-img" ref="CarouseImage" :style="{
            left: movePoints.x,
            top: movePoints.y
        }">
            <ImageLoader :src="carouselItem.bigImg" :placeholder="carouselItem.midImg" :handLoading="handLoading">
            </ImageLoader>
        </div>
        <div class="title" ref="title">{{ carouselItem.title }}</div>
        <div class="description" ref="description">
            {{ carouselItem.description }}
        </div>
    </div>
</template>

<script setup>
import { defineProps, ref, reactive, getCurrentInstance } from "vue";
import ImageLoader from "@/components/ImageLoader/index.vue";
import Loading from "@/components/Loading/index.vue";
import imageUrl from "@/assets/loading.svg";
//要获取DOM元素，设置ref为null，并返回出去，且模板中要有对于的ref内容
const CarouseImage = ref(null);
const isLoading = ref(false);
const title = ref(null);
const description = ref(null);
// 移动的坐标
const movePoints = reactive({
    x: 0,
    y: 0
})

// 参数
const { carouselItem } = defineProps({
    carouselItem: {
        type: Object,
        default: {}
    },
});

// 图片随鼠标的移动
function changeImageMove(e) {
    const { clientWidth, clientHeight } = CarouseImage.value;
    //设置固定移动范围为55px，算出每一步要移动的px
    const setUpX = 55 / (clientWidth / 2);
    const setUpY = 55 / (clientHeight / 2);
    //要移动多少步
    const moveUpX = e.x - (clientWidth / 2 + 250);
    const moveUpY = e.y - (clientHeight / 2);
    CarouseImage.value.style.left = setUpX * moveUpX + 'px';
    CarouseImage.value.style.top = setUpY * moveUpY + 'px';
}

// 图片加载完，文字效果
function handLoading(newVal) {
    // 将Loading消除
    isLoading.value = newVal;
    // 获取宽度
    const titleWidth = title.value.clientWidth;
    const desWidth = description.value.clientWidth;
    // 设置宽度为0
    title.value.style.width = 0;
    description.value.style.width = 0;
    // 浏览器重绘
    title.value.clientHeight
    // 重写样式
    title.value.style.opacity = 1;
    description.value.style.opacity = 1;
    title.value.style.width = titleWidth + 'px';
    description.value.style.width = desWidth + 'px';
}
</script>

<style lang="less" scoped>
.carousel-item-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    .carousel-img {
        width: 115%;
        height: 115%;
        transform: translate(0, 0) scale(1.1);
        transition: .1s;
        position: absolute;
    }

    .title,
    .description {
        position: absolute;
        left: 30px;
        color: #fff;
        text-shadow: 1px 0px rgba(0, 0, 0, 0.5), -1px 0 rgba(0, 0, 0, 0.5),
            0 1px rgba(0, 0, 0, 0.5), 0 -1px rgba(0, 0, 0, 0.5);
        white-space: nowrap;
        overflow: hidden;
        letter-spacing: 3px;
        opacity: 0;
        transition: 5s;
    }

    .title {
        top: calc(50% - 30px);
        font-size: 2em;
    }

    .description {
        top: calc(50% + 30px);
        font-size: 1.2em;
    }
}
</style>